<template>
  <!-- 工具组件 -->
  <div>
    <el-config-provider :size="size">
      <el-dropdown trigger="click" @command="txt">
        <div class="wenzi">
          <el-icon :size="this.sizes" class="iconfont icon-zitidaxiao"></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :command="'large'" :disabled="this.sizes == 'large'">
              <span class="iconfont icon-sanjiao3 tubiao"></span>超大
            </el-dropdown-item>
            <el-dropdown-item :command="''" :disabled="this.sizes == ''">
              <span class="iconfont icon-sanjiao3 tubiao"></span>默认
            </el-dropdown-item>
            <el-dropdown-item :command="'small'" :disabled="this.sizes == 'small'">
              <span class="iconfont icon-sanjiao3 tubiao"></span>较小
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-config-provider>
  </div>
</template>

<script>
import { ElConfigProvider } from 'element-plus'
export default {
  components: {
    ElConfigProvider
  },
  setup() {
    return {
      size: '' // 大小
    }
  },
  // 组件传值
  props: ['sizes'],
  methods: {
    txt(e) {
      this.$emit('txt', e)
    }
  }
}
</script>

<style lang="less" scoped>
span {
  .wenzi {
    margin: auto;
  }
}
</style>
